<template>
  <view class="container">
    <!-- 引入TabBar组件 -->
    <TabBar :tabs="tabList" :initialSelectedIndex="2" />
    
    <!-- 用户信息区块 -->
    <view class="user-info-block">
      <image class="avatar" :src="userInfo.con_pic" mode="aspectFill"></image>
      <view class="user-details">
        <text class="user-name">{{ userInfo.con_name }}</text>
        <text class="user-id">ID：{{ userInfo.con_id }}</text>
      </view>
    </view>

    <!-- 我的预约区块 -->
    <view class="my-appointments-block">
      <text class="block-title">我的预约</text>
      <view class="appointment-items">
        <view class="appointment-item" @click="showAppointmentMessage('正在预约')">
          <uni-icons type="loop" class="icon" size="30" />
          <text class="item-text">正在预约</text>
        </view>
        <view class="appointment-item" @click="showAppointmentMessage('预约完成')">
          <uni-icons type="checkmarkempty" class="icon" size="30" />
          <text class="item-text">预约完成</text>
        </view>
        <view class="appointment-item" @click="showAppointmentMessage('预约历史')">
          <uni-icons type="list" class="icon" size="30" />
          <text class="item-text">预约历史</text>
        </view>
      </view>
    </view>

    <!-- 其他功能区块 -->
    <view class="other-functions-block">
      <view class="function-item" @click="navigateToPage('/pages/user/my/profile')">
        <uni-icons type="compose" class="icon" size="30" />
        <text class="item-text">编辑资料</text>
      </view>
      <view class="divider"></view>
      <view class="function-item" @click="navigateToPage('/pages/other/help')">
        <uni-icons type="info" class="icon" size="30" />
        <text class="item-text">帮助中心</text>
      </view>
      <view class="divider"></view>
      <view class="function-item" @click="navigateToPage('/pages/other/ask')">
        <uni-icons type="phone" class="icon" size="30" />
        <text class="item-text">联系客服</text>
      </view>
      <view class="divider"></view>
      <view class="function-item" @click="navigateToPage('/pages/other/aboutUs')">
        <uni-icons type="email" class="icon" size="30" />
        <text class="item-text">关于我们</text>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <button class="logout-button" @click="logout">退出登录</button>
  </view>
</template>

<script>
import TabBar from '@/pages/components/TabBar.vue';

export default {
  components: {
    TabBar
  },
  data() {
    return {
      userInfo: {
        con_pic: '',
        con_name: '',
        con_id: 1,
      },
      // 定义底部导航条的选项
      tabList: [
        {
          pagePath: '/pages/user/index',
          text: '首页',
          icontype: 'home',
          selectedIcontype: 'home-filled'
        },
        {
          pagePath: '/pages/user/consult/consult',
          text: '咨询',
          icontype: 'calendar',
          selectedIcontype: 'calendar-filled'
        },
        {
          pagePath: '',
          text: '我的',
          icontype: 'person',
          selectedIcontype: 'person-filled'
        }
      ]
    }
  },
  methods: {
    // 从后端API获取用户信息
    async fetchUserInfo() {
      try {
        const res = await uni.request({
          url: `http://127.0.0.1:5001/api_1_0/consulter/${this.userInfo.con_id}`,
          method: 'GET',
        });

        if (res.statusCode === 200) {
          // 请求成功，更新userInfo对象
          this.userInfo = res.data.data[0];
        } else {
          // 请求失败，显示错误信息
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none',
            duration: 2000,
          });
        }
      } catch (err) {
        // 请求过程中发生异常，显示错误信息
        uni.showToast({
          title: '请求用户信息时发生异常',
          icon: 'none',
          duration: 2000,
        });
        console.error(err);
      }
    },
    // 导航到指定页面
    navigateToPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 退出登录逻辑
    logout() {
      // 退回到登录页面
      uni.redirectTo({
        url: '/pages/login/passwd_login', // 替换为登录页面的路径
      });
    },
    // 显示预约信息弹窗
    showAppointmentMessage(type) {
      uni.showModal({
        title: '提示',
        content: `查看${type}信息请前往后台`,
        showCancel: false, // 不显示取消按钮
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击了确定');
          }
        }
      });
    }
  },
  onLoad() {
    // 页面加载时调用获取用户信息的方法
    this.fetchUserInfo();
  }
}
</script>

<style>
.container {
  padding: 20px;
  padding-bottom: 50px; /* 为了不被TabBar遮挡，留出一些空间 */
}

.user-info-block {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
}

.user-id {
  font-size: 14px;
  color: #666;
}

.my-appointments-block {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.block-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.appointment-items {
  display: flex;
  justify-content: space-around;
}

.appointment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  width: 24px; /* 根据需要调整图标大小 */
  height: 24px;
  margin-right: 10px; /* 控制图标和文字之间的间距 */
}

.function-item {
  display: flex;
  align-items: center;
  padding: 10px 0; /* 添加内边距以控制行高 */
}

.item-text {
  font-size: 16px;
  color: #333;
}

.logout-button {
  width: 90%;
  padding: 10px 20px;
  background-color: #fff;
  color: #888;
  border: 1px #888;
  border-radius: 10px;
  font-size: 16px;
}

.other-functions-block {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.divider {
  height: 1px;
  background-color: #eee;
  margin: 10px 0; /* 控制分隔线上下的间距 */
}

.page-content {
  padding: 20px;
  text-align: center;
}
</style>